<!DOCTYPE html>
<html>
<head>
    <title>Final Color Mapping Test</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
        .section { background: white; padding: 20px; margin: 20px 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .color-row { display: flex; align-items: center; margin: 15px 0; }
        .node-circle { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        .edge-line { width: 60px; height: 4px; margin-right: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .label { font-size: 16px; }
        h2 { color: #333; margin-bottom: 20px; }
        .test-result { padding: 10px; margin: 10px 0; border-radius: 5px; background: #e8f5e9; border-left: 4px solid #4caf50; }
    </style>
</head>
<body>
    <h1>🎨 Graph Visualization Color System</h1>

    <div class="section">
        <h2>Node Types (4 种节点类型)</h2>
        <div class="color-row">
            <div class="node-circle" style="background: #ef4444;"></div>
            <div class="label"><strong>Center Node</strong> - 中心节点（被查询的主节点）</div>
        </div>
        <div class="color-row">
            <div class="node-circle" style="background: #4ECDC4;"></div>
            <div class="label"><strong>Class</strong> - 类节点</div>
        </div>
        <div class="color-row">
            <div class="node-circle" style="background: #FFD93D;"></div>
            <div class="label"><strong>Directory</strong> - 目录节点</div>
        </div>
        <div class="color-row">
            <div class="node-circle" style="background: #667eea;"></div>
            <div class="label"><strong>File</strong> - 文件节点</div>
        </div>
        <div class="color-row">
            <div class="node-circle" style="background: #96CEB4;"></div>
            <div class="label"><strong>Function</strong> - 函数/方法节点</div>
        </div>
    </div>

    <div class="section">
        <h2>Edge Types (4 种边类型)</h2>
        <div class="color-row">
            <div class="edge-line" style="background: #10b981;"></div>
            <div class="label"><strong>Contains</strong> - 包含关系（目录包含文件等）</div>
        </div>
        <div class="color-row">
            <div class="edge-line" style="background: #667eea;"></div>
            <div class="label"><strong>Imports</strong> - 导入关系（文件导入其他模块）</div>
        </div>
        <div class="color-row">
            <div class="edge-line" style="background: #ef4444;"></div>
            <div class="label"><strong>Inherits</strong> - 继承关系（类继承）</div>
        </div>
        <div class="color-row">
            <div class="edge-line" style="background: #f59e0b;"></div>
            <div class="label"><strong>Invokes</strong> - 调用关系（方法调用）</div>
        </div>
    </div>

    <div class="section">
        <h2>API Test Results</h2>
        <div id="apiTests"></div>
    </div>

    <script>
        async function testAPI() {
            const testDiv = document.getElementById('apiTests');

            try {
                const response = await fetch('http://localhost:4070/api/graph/business-payout-dependency%2Fsrc%2Fmain%2Fjava%2Fcom%2Fpingpongx%2Fbusiness%2Fpayout%2Fdependency%2Fuser%2FUserClient.java?depth=1');
                const data = await response.json();

                // Count node types
                const nodeTypes = {};
                data.nodes.forEach(node => {
                    nodeTypes[node.type] = (nodeTypes[node.type] || 0) + 1;
                });

                // Count edge types
                const edgeTypes = {};
                data.edges.forEach(edge => {
                    edgeTypes[edge.type] = (edgeTypes[edge.type] || 0) + 1;
                });

                let html = '<div class="test-result">';
                html += '<h3>✅ API Response Analysis</h3>';
                html += '<p><strong>Total Nodes:</strong> ' + data.nodes.length + '</p>';
                html += '<p><strong>Node Types Distribution:</strong></p><ul>';
                for (const [type, count] of Object.entries(nodeTypes)) {
                    html += `<li>${type}: ${count} nodes</li>`;
                }
                html += '</ul>';
                html += '<p><strong>Total Edges:</strong> ' + data.edges.length + '</p>';
                html += '<p><strong>Edge Types Distribution:</strong></p><ul>';
                for (const [type, count] of Object.entries(edgeTypes)) {
                    html += `<li>${type}: ${count} edges</li>`;
                }
                html += '</ul>';
                html += '</div>';

                testDiv.innerHTML = html;
            } catch (error) {
                testDiv.innerHTML = '<div class="test-result" style="background: #ffebee; border-color: #f44336;">❌ Error: ' + error.message + '</div>';
            }
        }

        testAPI();
    </script>
</body>
</html>